<template>
  <div class="full-screen-div">
    <HeaderComponent @go-back="goBack" title="申请记录" />
    <ApplicationFilter @filterCondition="getfilterCondition" style="width: 90%;margin: 5px auto 5px auto;position: relative;"/>
    <RecordList :records="applicationRecordsList" useType="application" style="width: 90%;height: 70%;margin: 5px auto 5px auto;position: relative;overflow-y: scroll;"/>
  </div>
</template>

<script setup>
import HeaderComponent from '../../component/Header.vue';
import ApplicationFilter from '../../component/ApplicationFilter.vue';
import RecordList from '../../component/RecordList.vue';
import { ref, onMounted, watch } from 'vue';
import {getPersonalRecords} from '../../api/approval.js'
import { getSessionStorageObj } from '../../utils/common';
import { getCurDateTime } from '../../utils/common.js';
import router from "../../router/index.js"; // 确保路径正确

const goBack = () => {
  router.push('/application'); // 返回主页
};

const applicationRecordsList = ref([]);
const requestBody = ref({
	"empId": "",
	"endTime": "",
	"startTime": ""
})

const getfilterCondition = (data)=>{
  requestBody.value.startTime = data.startTime;
  requestBody.value.endTime = data.endTime;
  requestBody.value.flowId = data.type;

  console.log("requestBody.value:",requestBody.value);
}

const initApplicationRecordsList = async (data) => {
  const res = await getPersonalRecords(data);
  console.log("res:",res);
  if(res.flag){
    applicationRecordsList.value = res.result.reverse();
  }else{
    applicationRecordsList.value = [];
  }
}

watch(requestBody.value,async(newValue)=>{
  //发生变化就发一次请求
  initApplicationRecordsList(newValue);
})

onMounted(async() => {
  //挂载时默认获得所有申请记录
  //获取sessionStorage中的用户信息
  const userInfo = getSessionStorageObj('userInfo')
  //获取sessionStorage中的用户id
  requestBody.value.empId = userInfo.empId
  
  //设置起始时间
  const now = new Date();
  const tomorrow = new Date(now);
  tomorrow.setDate(now.getDate() + 1);

  requestBody.value.startTime = getCurDateTime(now);
  requestBody.value.endTime = getCurDateTime(tomorrow);

  console.log("requestBody.value:",requestBody.value);

  initApplicationRecordsList(requestBody.value);
});
</script>

<style scoped>
.full-screen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E1EFFF;
  display: flex;
  flex-direction: column;
}
</style>